<template>
	<!-- https://www.mp3pc.com/uploads/fdabf4b09939c4bb9704dd466c99375d.jpg -->
	<div id="content">
		<van-row>
			<van-col span="4">
				<van-image-preview v-model:show="show" :images="images" closeable: true/>
				<van-image round :src="url" @click="show = true" />
			</van-col>
			<van-col span="8">{{ nickname }}</van-col>

			<van-col offset="8" span="3">签到</van-col>
		</van-row>
		<van-cell-group>
			<van-cell is-link>
				<!-- 使用 title 插槽来自定义标题 -->
				<template #title>
					<van-uploader name="uploadFile" :after-read="afterRead">
						<van-button type="default">修改头像</van-button>
					</van-uploader>
				</template>
			</van-cell>
		</van-cell-group>


		<van-row class="message">
			<van-col span="6">
				<div class="classify">
					<h3>动态</h3>
					<p>5</p>
				</div>
			</van-col>
			<van-col span="6">
				<div class="classify">
					<h3>关注</h3>
					<p>213</p>
				</div>
			</van-col>
			<van-col span="6">
				<div class="classify">
					<h3>粉丝</h3>
					<p>130</p>
				</div>
			</van-col>
			<van-col span="6">
				<div class="classify">
					<van-icon name="edit" />
					<p>我的资料</p>
				</div>

			</van-col>
		</van-row>

		<van-cell-group>
			<van-cell title="我的消息" icon="envelop-o" is-link />
		</van-cell-group>
		<van-cell-group>
			<van-cell title="VIP会员" icon="vip-card-o" is-link />
			<van-cell title="商城" icon="cart-o" is-link />
			<van-cell title="在线听歌免流量" icon="credit-pay" is-link />
		</van-cell-group>

		<van-cell-group>
			<van-cell title="设置" icon="setting-o" is-link />
			<van-cell title="扫一扫" icon="scan" is-link />
			<van-cell title="个性换肤" icon="closed-eye" is-link value="自选颜色" @click="showone = true" />
			<van-action-sheet v-model:show="showone" :actions="actions" cancel-text="取消" close-on-click-action />
			<van-cell center title="夜间模式" icon="bulb-o" is-link>
				<template #right-icon>
					<van-switch size="24" inactive-color="#dcdee0" />
				</template>
			</van-cell>
			<van-cell title="定时关闭" icon="underway-o" is-link />
		</van-cell-group>
		<van-button type="default" @click="logout" color="rgb(211, 7, 7)" block>退出登录\关闭</van-button>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ImagePreview } from 'vant';
import { RequestLogout, RequestUserStatus } from "@/api/user"
import router from '@/router';
import { Notify } from 'vant';
// 获取持久化存储数据 (测试)
import { useuidStore } from '@/stores/user'
const userstore = useuidStore()
let fn1 = ()=>{
  console.log(userstore.user);
}
fn1()
let fn2 = ()=>{
  userstore.saveUser(1,2,3)
}


const VanImagePreview = ImagePreview.Component;


const show = ref(false);
const images = ref([]);
let url = ref("https://www.mp3pc.com/uploads/fdabf4b09939c4bb9704dd466c99375d.jpg")

images.value.push(url.value);

const afterRead = (file) => {
	// 此时可以自行将文件上传至服务器
	// console.log(file);
	url.value = file.content; //URL.createObjectURL(file)
	// console.log("url.value",url.value);
    images.value.shift();
	images.value.push(url.value)
};
// localStorage.getItem("headImg", url.value)

const showone = ref(false);
const actions = [
	{ name: '默认' },
	{ name: '蓝色' },
	{ name: '黄色' },
];

const logout = async () => {
	const res = await RequestLogout()
	console.log(res)
	if (res.data.code == 200) {
		userstore.user = {}
		Notify({ type: "success", message: "退出成功" })
		router.push({ path: '/home' })
	} else {
		Notify({ type: "danger", message: "退出失败请先登录" })
	}
}
let nickname = ref("游客123")
const getHeadimg = async () => {
	if(userstore.user.uid){
		url.value = userstore.user.avatarUrl
	} else {
		console.log("未登录拿不到用户头像 使用默认头像");
	}
}
getHeadimg()

// 上传图片
// async afterRead (file) {
//       const fd = new FormData()
//       fd.append('file', file.file)
//       const res = await upload(fd)
//       url = this.$axios.defaults.baseURL + res.data.data.url
//       //   console.log(file.file.name)
//       console.log(res)
//     }

</script>

<style scoped>
#content {
	height: 110vh;
	width: 100%;
	background-color: rgb(238, 239, 240);
}

#content .message {
	margin-bottom: 10px;
}

#content .van-row:nth-of-type(1) .van-image {
	margin-left: 10px;
	width: 40px;
	height: 40px;
}

#content .van-row:nth-of-type(1) .van-image img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

#content .van-row:nth-of-type(1) .van-col:nth-of-type(1) {
	margin-top: 4px;
}

#content .van-row:nth-of-type(1) .van-col:nth-of-type(2) {
	font-size: 14px;
	margin-top: 10px;
}

#content .van-row:nth-of-type(1) .van-col:nth-of-type(3) {
	font-size: 14px;
	border: 1px solid rgb(211, 7, 7);
	text-align: center;
	width: 40px;
	height: 20px;
	margin-top: 12px;
	border-radius: 8px;
}

#content .van-cell-group {
	margin-bottom: 10px;
}

#content .van-row {
	background-color: #fff;

}

#content .van-row .classify {
	border-right: 1px solid rgb(239, 240, 241);
}

#content .van-row .classify h3,
#content .van-row .classify .van-icon,
#content .van-row .classify p {
	text-align: center;
	font-size: 12px;
	font-weight: normal;
}

#content .van-row .classify .van-icon {
	margin-left: 42px;
}

#content .van-row:nth-child(1) {
	background-color: rgb(211, 7, 7);
	color: #fff;
}
</style>
